{% extends "base.html" %}
{% block head %}
{{ super() }}
<script>
    // Función para actualizar el valor del input oculto con la table.family seleccionada
    function updateHiddenInput() {
        var selectedTable = document.getElementById('table').value;
        var hiddenInput = document.getElementById('family');
        hiddenInput.value = selectedTable.split('-')[1].trim(); // Obtener la parte de la familia de la tabla seleccionada
    }
</script>
{% endblock %}
{% block content %}
<div class="container">
    <h1>Create chain:</h1>
    <form id="myForm" action="/create_chain" method="POST" onsubmit="updateHiddenInput()">
        {{ form.csrf_token }}
        <div class="form-group">
            {{ form.table.label }}
            <select id="table" name="table" class="form-control" onchange="updateHiddenInput()">
                {% for table in tables %}
                <option value="{{ table.id }}&&{{ table.family }}">{{ table.name }} - {{ table.family }}</option>
                {% endfor %}
            </select>
            {% if form.table.errors %}
            <ul class="errors">
                {% for error in form.table.errors %}
                <li>{{ error }}</li>
                {% endfor %}
            </ul>
            {% endif %}
        </div>
        <div class="form-group">
            {{ form.name.label }} {{ form.name(class="form-control") }}
            {% if form.name.errors %}
            <ul class="errors">
                {% for error in form.name.errors %}
                <li>{{ error }}</li>
                {% endfor %}
            </ul>
            {% endif %}
        </div>
        <div class="form-group">
            {{ form.policy.label }}
            <select name="policy" class="form-control">
                <option value="accept">accept</option>
                <option value="drop">drop</option>
                <option value="reject">reject</option>
                <option value="return">return</option>
            </select>
            {% if form.policy.errors %}
            <ul class="errors">
                {% for error in form.policy.errors %}
                <li>{{ error }}</li>
                {% endfor %}
            </ul>
            {% endif %}
        </div>
        <input type="hidden" id="family" name="family" value="">
        <button type="submit" class="btn btn-primary">Create</button>
    </form>
</div>
{% endblock %}
